<template>
  <div class="rank clearfix">
    <ul class="rankList">
      <li v-for="(rl,index) in rankList" :key="index" @click="getRank(index)"  :class="idx==index ?'active':''">{{rl}}</li>
    </ul>
    <div class="playlist"  v-if="tracks.length!==0">
        <div class="rankHead">
          <div class="plImg">
            <img :src="playlist.coverImgUrl" alt="">
          </div>
          <div class="plMsg">
            <h3>{{playlist.name}}</h3>
            <p>更新时间：{{format(playlist.updateTime)}}</p>
          </div>
        </div>
        <ul class="songlist">
          <li v-for="(t,index) in tracks" :key="index">
            <div class="no">{{index<9?"0"+(index+1):index+1}}</div>
            <songs :songdata="{name:t.name,artist:t.ar,album:t.al,index}" :songlist="tracks"
            ></songs>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui';
import songs from '../components/songs.vue';

export default {
  mounted() {
    this.getRank();
  },
  data() {
    return {
      rankList: {
        "0": "云音乐新歌榜",
        "1": "云音乐热歌榜",
        "2": "网易原创歌曲榜",
        "3": "云音乐飙升榜",
        "4": "云音乐电音榜",
        "5": "UK排行榜周榜",
        "6": "美国Billboard周榜",
        "7": "KTV嗨榜",
        "8": "iTunes榜",
        "9": "Hit FM Top榜",
        "10": "日本Oricon周榜",
        "11": "韩国Melon排行榜周榜",
        "12": "韩国Mnet排行榜周榜",
        "13": "韩国Melon原声周榜",
        "14": "中国TOP排行榜(港台榜)",
        "15": "中国TOP排行榜(内地榜)",
        "16": "香港电台中文歌曲龙虎榜",
        "17": "华语金曲榜",
        "18": "中国嘻哈榜",
        "19": "法国 NRJ EuroHot 30周榜",
        "20": "台湾Hito排行榜",
        "21": "Beatport全球电子舞曲榜",
        "22": "云音乐ACG音乐榜",
        "23": "云音乐嘻哈榜"
      },
      idx:0,
      playlist:{},
      tracks:[],
      idlist:[]
    };
  },
  methods: {
    getRank(index = 0){
        // MintUI加载中弹窗 
        Indicator.open({
          text: '加载中....',
          spinnerType: 'fading-circle'
        });
        this.axios.get("/top/list", { params: { idx: index } }).then(res => {
          if(res.data.code==200){

            this.idx = index;
            this.playlist = res.data.playlist;
            this.tracks = res.data.playlist.tracks.slice(0,100);
            
            this.idlist = this.tracks.map(item => {
                return item.id;
            });

            Indicator.close();
          }
        });
    },
    format(timestamp){
      var time = new Date(timestamp);
      return `${time.getMonth()+1}月${time.getDate()}日`
    }
  },
  components: {
    songs
  }
};
</script>

<style lang="scss" scoped>
.rank{
  background: #fff;
  color: #1a1a1a;
  height: 100%;
}
.rankList{
  float: left;
  width: 30vw;
  font-size: 12px;
  text-align: left;
  height: 100%;
  overflow-y: scroll;
  padding-left: 4px;
  border-right: 1px solid #c8c8c8;
  li{
    height: 35px;
    line-height: 35px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &.active{
      color: #42b983;
      border-right: 4px solid #42b983;
    }
  }
}
.playlist{
  float: left;
  width: 70vw;
  height: 100%;
  overflow-y: scroll;
  padding: 8px 2vw;
  .plImg,.plMsg{
    display: inline-block;
    vertical-align: middle;
  }
  .plImg{
    width: 20vw;
    min-width: 64px;
    max-width: 114px;
  }
  .plMsg{
    width: 45vw;
    padding: 10px ;
    h3{
      font-size: 16px;
      margin-bottom: 25px;
    }
    p{
      font-size: 12px;
    }
  }

  .songlist{
    li{
      .no,.songs{
        display: inline-block;
        vertical-align: middle;
      }
      .no{
        width: 10%;
      }
      .songs{
        width: 88%;
      }
    }
  }
}
</style>
